import {Block, Image, ScrollView, Text, View} from '@tarojs/components'
import {AtFloatLayout, AtIcon} from "taro-ui";
import React, {useState, useEffect} from 'react';
import Taro from '@tarojs/taro';
import {COUPON_LIST, COUPON_RECEIVE, TARO_ENV} from "../../../constants/api";
import {newHttp} from "../../../utils/request";
import {user} from "../../../utils/user.service";
import {GetRequest} from "../../../utils/tools";
import './index.scss'

const CouponBox: React.FC<{ type?: string; list?: number; goodsId?: any; isLogin?: any; category?: number; groupDetail?: any; goodsLightspot?: any }> = (props) => {
  const [show, setShow] = useState(false)
  const [dataList, setDataList] = useState([] || false)

  const handlerCouponList = async () => {
    const isLogin = await user.checkLogin()
    if (isLogin) {
      const dataInfo = await newHttp.catchPost(COUPON_LIST, {
        p: 1,
        s: 99,
        k: '',
        productId: props.goodsId,
        category: props.category
      })
      setDataList(dataInfo)
    }
  }

  useEffect(() => {
    handlerCouponList()
  }, [props.isLogin, props.goodsId, props.category])

  const closeBox = async () => {
    if (TARO_ENV === 'h5' && Taro.getCurrentInstance().router.params.pkeys) {
      return Taro.showToast({title: 'pc端此功能只做模拟，具体请前往移动端体验！', duration: 3500, icon: 'none'})
    }
    const isLogin = await user.checkLogin()
    if (!isLogin) {
      user.jumpLogin()
      return
    }
    setShow(!show)
  }
  const receive = async (coupon_uuid) => {
    const ret = await newHttp.post(COUPON_RECEIVE, {coupon_uuid}, true)
    if (ret.data != undefined) {
      const dataList = await newHttp.catchPost(COUPON_LIST, {
        p: 1,
        s: 99,
        k: '',
        productId: props.goodsId,
        category: props.category
      })
      setDataList(dataList)
      Taro.showToast({
        title: '领取成功',
        icon: 'none',
        mask: true
      })
    } else if (ret.message === '没领到哦 此优惠券已领取完') {
      Taro.showToast({
        title: ret.message,
        icon: 'none',
        mask: true,
        duration: 2500
      })
      const timer = setTimeout(async () => {
        clearTimeout(timer)
        const dataList = await newHttp.catchPost(COUPON_LIST, {
          p: 1,
          s: 99,
          k: '',
          productId: props.goodsId,
          category: props.category
        })
        setDataList(dataList)
      }, 2500)
    } else {
      Taro.showToast({
        title: ret.message || '领取失败',
        icon: 'none',
        mask: true
      })
    }
  }
  return (
    <View
      className={`coupon-wrapper ${!props.groupDetail && props.goodsLightspot && 'coupon-no-bottom'} ${(props.type === 'limited' || props.type === 'product') && !props.groupDetail && 'min-top-coupon'} ${props.groupDetail && 'groupDetail-couponWrapper'}`}
    >
      <View className='couponBox' onClick={closeBox.bind(this)}>
        <Image className='couponBox-lq' mode='aspectFill'
          src='https://resource.ivcheng.com/upload/images/20210825/1629879850940_952.png'
        />
        <View className='couponBox-lable'> {props.list && props.list.map((item, index) => <Block
          key={item.id}
        >{index < 2 && <Text>{item.reductionArr && item.reductionArr.length > 0 && <Block>
          <Text decode>{item.reductionArr[0].str} <Text
            className='coupon-label-price'
          >{item.reductionArr[0].price}</Text></Text>{item.reductionArr.length > 1 &&
          <Block><Text decode>{item.reductionArr[1].str}<Text
            className='coupon-label-price'
          >{item.reductionArr[1].price}</Text></Text></Block>}
        </Block>}</Text>}</Block>)}</View>
        <View className='couponBox-go'>领券<AtIcon value='chevron-right' size='16' color='#ee713b' /></View>
      </View>
      {show &&
        <AtFloatLayout isOpened={show} className='couponBox-list-layout' title='优惠券' onClose={closeBox.bind(this)}
          scrollY
        >
          <ScrollView enable-flex scrollY className='scroll-view'>
            {dataList && dataList.map(item => <View className='couponBox-item' key={item.id} hoverClass='none'>
              <View className='left'>
                <View className='left-top'>￥<Text>{item.discounts_money}</Text></View>
                <View
                  className='left-bottom'
                >{!!item.can_use_limit ? `满${item.can_use_limit_money}可用` : '无门槛'}</View>
                <View className='left-content' />
                <View className='right-content' />
              </View>
              <View className='right'>
                <View className='right-name'>{item.name}</View>
                {item.reduction_str && <View className='right-manjian'>{item.reduction_str}</View>}
                {item.date_show && <View className='right-yxq'>{item.date_show}</View>}
                {!item.is_can_receive ?
                  <View className='right-receive-btn'><View onClick={receive.bind(this, item.uuid)}
                    className='right-receive'
                  >立即领取</View></View>
                  :
                  <Image className='right-end' mode='widthFix'
                    src='https://resource.ivcheng.com/resources/images/couponIcon.png'
                  />}
              </View>
            </View>)}
            <View className='coupon-place-holder-height' />
          </ScrollView>
        </AtFloatLayout>}
    </View>
  )
}

export default CouponBox
